<template>
  <t-dialog
    header="录入还款信息"
    :width="width ? width : '50%'"
    :visible="showDialog"
    @confirm="handleConfirm"
    @close="handleCancel"
    @cancel="handleCancel"
    confirmBtn="申请还款"
    preventScrollThrough
    placement="center"
  >
    <t-form :data="pageData.formData">
      <t-form-item label="还款金额" name="amount" requiredMark>
        <t-input-number
          :min="0"
          v-model="pageData.formData.amount"
          theme="column"
          :decimalPlaces="2"
          style="width: 100%"
        />
      </t-form-item>
    </t-form>
  </t-dialog>
</template>

<script lang="tsx" setup>
// 框架和组件库
import { reactive } from "vue";

// 工具函数
import { http } from "@/utils/fetch";

// 业务数据
import { MessagePlugin } from "tdesign-vue-next";

const props = defineProps(["id", "width", "showDialog", "exchange", "row"]);
const emits = defineEmits(["onClose"]);

const CREATE_FORM_PATH = "/billing/repay"; // 创建接口

const pageData = reactive({
  creditNames: "",
  formData: {
    amount: 0
  }
});

const handleCancel = () => {
  emits("onClose", "cancel");
};

const handleConfirm = async () => {
  const resultData = await http("POST", `${CREATE_FORM_PATH}?id=${props.id}&amount=${pageData.formData.amount}`);
  // 根据接口返回结果，提示操作成功或失败，并关闭对话框
  if (resultData.code === 200) {
    MessagePlugin.success("申请成功！");
    emits("onClose", "success");
  }
};
</script>
